import { Component, OnInit } from '@angular/core';
import { HttpClient , HttpHeaders } from '@angular/common/http';
// 15036871261

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // 获取手机号post到后台
  public tel: any;
  // 手机号获取焦点
  public telSuccess: any = false;
  public telError: any = false;
  public telEmpty: any = false;
  // // 控制手机号输入边框的阴影
  // public telColor: any = false;
  // // 手机号正确
  // public successTel: any = false;
  // // 控制手机号不存在的状态
  // public emptyTel: any = false;
  // // 控制错误手机号格式信息
  // public errorTel: any = false;
  // // 控制验证码输入框边界的阴影
  // public checkColor: any = false;
  // // 控制验证码为空时信息状态
  // public emptyCheck: any = false;
  // // 判断验证码错误时信息状态
  // public errorCheck: any = false;
  // // 显示绑定成功输入框
  // public successMsg: any = false;
  // // 验证码
  // public num: any = 59;
  // // 控制显示倒计时
  // public check: any = true;
  // // 控制显示发送验证码提示框
  // public showCheckNum: any = false;
  // // 控制绑定成功提示框
  // public showSuccess: any = false;
  // // 控制显示跳转首页的时间
  // public num1: any = 3;
  // // 控制显示跳转时间信息
  // public showSkiptime: any = false;
  // // 控制绑定按钮状态
  // public useBangding = false;
  // // 手机号码
  // public tel: any;
  // // 短信验证码
  // public checkNums: any;
  // public checkNumsByUser: any;
  // // 显示验证码信息提示框（类似短信）
  // public showNumBoox: any = false;
  // public e1: any;
  // public e2: any;
  // // 验证码存储
  // // public checkNumber: any = '';
  constructor(public http: HttpClient) { }
  // constructor(public http: HttpClient , private router: Router , private service: CheckloginService) { }
  ngOnInit() {
  }
  // // 手机号输入框获取焦点
  // onFocusTel(e) {
  //   this.telColor = true;
  //   this.errorTel = false;
  //   this.emptyTel = false;
  // }
  // onChange() {
  //   this.successTel = false;
  // }
  // // 手机号输入框失去焦点
  // onBlurTel(e) {
  //   this.e1 = e;
  //   this.telColor = false;
  //   if ( e.target.value === '') {
  //     this.emptyTel = true;
  //     this.errorTel = false;
  //     return false;
  //   } else if ( !(/^1[3456789]\d(9)$/.test(e.target.value))) {
  //     this.emptyTel = false;
  //     this.errorTel = true;
  //     return false;
  //   } else {
  //     // 提示手机号输入正确
  //     this.successTel = true;
  //     this.tel = e.target.value;
  //     return true;
  //   }
  // }
  // // 验证码输入框获取焦点
  // onFocuscheck(e) {
  //   this.checkColor = true;
  //   this.emptyCheck = false;
  //   this.errorCheck = false;
  // }
  // // 验证码输入框失去焦点
  // onBlurcheck(e) {
  //   this.e2 = e;
  //   this.checkColor = false;
  //   if ( e.target.value === '') {
  //     this.emptyCheck = false;
  //     return false;
  //   } else if (!(/^\d{6}$/.test(e.target.value))) {
  //     this.emptyCheck = false;
  //     this.errorCheck = true;
  //     return false;
  //   } else {
  //     this.checkNumsByUser = e.target.value;
  //     return true;
  //   }
  // }
  // // 生成验证码
  // checkNum() {
  //   if ( this.onBlurTel(this.e1)) {
  //     let that = this;
  //     this.showCheckNum = true;
  //     this.check = false;
  //     const url = 'http://192.168.2.228:8080/user/sendpin';
  //     const heads = {
  //       headers: new HttpHeaders({
  //         'Content-Type' : 'application/json'
  //       })
  //     };
  //     const params = {
  //       u_tel: this.tel
  //     };
  //     this.http.post(url , params , heads).subscribe( res => {
  //       this.checkNums = res['data'];
  //       console.log(this.checkNums);
  //       this.showNumBoox = true;
  //     });
  //     // 设置显示验证码为6s
  //     setTimeout(() => {
  //       this.showNumBoox = false;
  //     }, 6000);
  //     let id = setInterval(function() {
  //       that.num = that.num - 1;
  //       if (that.num === 57) {
  //         that.showCheckNum = false;
  //       } else if ( that.num === 0 ) {
  //         clearInterval(id);
  //         that.num = 60;
  //         that.check = true;
  //       }
  //     }, 1000);
  //   }
  // }
  // // 绑定手机号
  // bangding() {
  //   const url = 'http://192.168.2.228:8080/user/login';
  //   const heads = {
  //     headers: new HttpHeaders({
  //       'Content-Type' : 'application/json'
  //     })
  //   };
  //   const params = {
  //     u_id: localStorage.user,
  //     u_tel: this.tel,
  //     u_cheaknumber: this.checkNumsByUser
  //   };
  //   if ( this.onBlurTel( this.e1 ) && this.onBlurcheck( this.e2 )) {
  //     this.http.post( url , params , heads).subscribe(res => {
  //       // 验证码正确
  //       if ( res['code'] === 0) {
  //         let that = this;
  //         this.showSuccess = true;
  //         let id = setInterval(() => {
  //           that.num1 = that.num1 - 1;
  //           if (that.num1 === 1) {
  //             that.showSuccess = false;
  //           } else if (that.num1 === 0) {
  //             clearInterval(id);
  //             // 把用户添加到localStorge
  //             // this.service.addLogin( res['data']['u_id']);
  //             // this.router.navigate(['/tabar/shop']);
  //             that.num1 = 3;
  //           }
  //         }, 1000);
  //       } else {
  //         this.errorCheck = true;
  //       }
  //     });
  //   }
  // }
  // // 返回上一页
  // goback() {
  //   history.go(-1);
  // }

  // 手机号值获取焦点(正确获取、获取错误或者失败、手机号为空)
  onFocusTel() {
    this.telSuccess = true;
    this.telError = true;
    this.telEmpty = true;
  }
  // 验证码获取(正确获取、获取失败、其他判断)
  // 获取验证码
  getCode() {
    const getCode = 'http://192.168.2.228:8080/user/sendpin';
    const tel = {u_tel : this.tel};
    this.http.post(getCode , tel , {
      headers: new HttpHeaders({
        'content-Type': 'application/json'
      })
    }).subscribe((response) => {
      console.log(response);
      // this.u_tel = this.tel;
    });
  }

  binding() {
    const binding = document.getElementById('checkBox');
    binding.style.display = 'none';
    // 用户登录
    const usrLogin = 'http://192.168.2.228:8080/user/login';
    this.http.post(usrLogin , {
      headers: new HttpHeaders({
        checkNumber: ''
      })
    }).subscribe((response) => {
      console.log(response);
    });
  }
}
